<template>
    <div class="kechengbanjiguanli">
        <div>
            <a-button type="primary" class="editable-add-btn" @click="handleAdd">
            +新增班级
            </a-button>
            <a-input-search
                v-model="searchValue"
                placeholder="input search text"
                enter-button
                style="width: 300px"
                @search="onSearch(searchValue)"
            />
            <a-table bordered :data-source="dataSource" :columns="columns" rowKey="columnId">
            <template slot="name" slot-scope="text, record">
                <editable-cell :text="text" @change="onCellChange(record.key, 'name', $event)" />
            </template>
            <template slot="time" slot-scope="text, record">
                <editable-cell :text="text" @change="onCellChange(record.key, 'time', $event)" />
            </template>
            <template slot="student_number" slot-scope="text, record">
                <editable-cell :text="text" @change="onCellChange(record.key, 'student_number', $event)" />
            </template>
            <template slot="class" slot-scope="text, record">
                <editable-cell :text="text" @change="onCellChange(record.key, 'class', $event)" />
            </template>
            <!-- @confirm="() => onDelete(record.key)" -->
            <template slot="operation" slot-scope="text, record">
                <a-popconfirm
                v-if="dataSource.length"
                title="Sure to delete?"
                @confirm='deleteS(record.key)'
                >
                <a href="javascript:;">删除&nbsp;</a>
                </a-popconfirm>
                <a-popconfirm
                v-if="dataSource.length"
                title="Sure to delete?"
                @confirm="save(record.key)"
                >
                <a href="javascript:;">&nbsp; &nbsp; &nbsp;保存增加</a>
                </a-popconfirm>
                <a-popconfirm
                v-if="dataSource.length"
                title="Sure to delete?"
                @confirm="modify(record.key)"
                >
                <a href="javascript:;">&nbsp; &nbsp; &nbsp;保存修改</a>
                </a-popconfirm>
            </template>
            </a-table>
        </div>
    </div>
</template>

<script>
import EditableCell from './EditableCell'

export default {
    components:{
        EditableCell,
    },
    mounted() {
        this.axios.defaults.headers.common['Authorization'] = window.sessionStorage.getItem('token');
        
        (async () => {
        await   this.axios.post('/user/query_group/').then((res)=>{
                    this.dataSource =  res
                });
        this.count = await  this.dataSource.length+1
        })();        
    },
    data() {
        return {
            searchValue:'',
            dataSource:[],
            // dataSource: [
            // {
            // key: '0',
            // name: '2021春季1班',
            // time: '20210101-20210701',
            // student_number: '30',
            // },
            // {
            // key: '1',
            // name: '2021春季2班',
            // time: '20210101-20210701',
            // student_number: '29',
            // },
            // ],
            count: 0,
            columns: [
                {
                title: '班级课程名称',
                dataIndex: 'name',
                scopedSlots: { customRender: 'name' },
                },
                {
                title: '账号有效期',
                dataIndex: 'time',
                scopedSlots: { customRender: 'time' },
                },
                {
                title: '班级学生数',
                dataIndex: 'student_number',
                scopedSlots: { customRender: 'student_number' },
                },
                {
                title: '操作',
                dataIndex: 'operation',
                scopedSlots: { customRender: 'operation' },
                },
            ],
        }
    },
    computed:{
        // dataSource:{
        //     get(){
        //         let arr = this.dataList
        //         arr.forEach((item,key) => {
        //             item.key = key
        //         });
        //         return arr
        //     },
        //     set(){
                
        //     }
            
        // },

    },
    methods: {
            onCellChange(key, dataIndex, value) {
            const dataSource = [...this.dataSource];
            const target = dataSource.find(item => item.key === key);
            if (target) {
                target[dataIndex] = value;
                this.dataSource = dataSource;
            }
            },
            onDelete(key) {
            const dataSource = [...this.dataSource];
            this.dataSource = dataSource.filter(item => item.key !== key);
            },
            handleAdd() {
            const { count, dataSource } = this;
            const newData = {
                key: count,
                name: `classname${count}`,
                time: 'time',
                student_number: `student_number`,
            };
            this.dataSource = [...dataSource, newData];
            this.count = count + 1;
            },
            save(key){
                this.axios.post('/user/add_group/',{
                    name:this.dataSource[key-1].name,
                    start_time:this.dataSource[key-1].time.split('#')[0].split(' ')[0],
                    end_time:this.dataSource[key-1].time.split('#')[1].split(' ')[0],
                    number:Number(this.dataSource[key-1].student_number)
                }).then((res)=>{
                    this.$message.info('增加成功')
                })
            },
            modify(key){
                this.axios.post('/user/modify_group/',{
                    name:this.dataSource[key-1].name,
                    start_time:this.dataSource[key-1].time.split('#')[0].split(' ')[0],
                    end_time:this.dataSource[key-1].time.split('#')[1].split(' ')[0],
                    number:Number(this.dataSource[key-1].student_number)
                }).then((res)=>{
                    this.$message.info('修改成功')
                })
            },
            deleteS(key){
                let name = ''
                this.dataSource.forEach((item,index) => {
                    if(item.key ==key){
                        name = item.name
                    }
                });
                this.axios.post('/user/delete_group/',{
                    name:name,
                }).then((res)=>{
                    this.axios.post('/user/query_group/').then((res)=>{
                    this.dataSource =  res
                    });
                    this.$message.info('删除成功')
                })

            },
            onSearch(searchValue){
                this.axios.post('/user/search_group/',{
                    string:searchValue,
                }).then((res)=>{
                    this.dataSource =  res
                })
            },
    },
}
</script>

<style lang="scss">
    .kechengbanjiguanli{
        .editable-cell {
        position: relative;
        }

        .editable-cell-input-wrapper,
        .editable-cell-text-wrapper {
        padding-right: 24px;
        }

        .editable-cell-text-wrapper {
        padding: 5px 24px 5px 5px;
        }

        .editable-cell-icon,
        .editable-cell-icon-check {
        position: absolute;
        right: 0;
        width: 20px;
        cursor: pointer;
        }

        .editable-cell-icon {
        line-height: 18px;
        display: none;
        }

        .editable-cell-icon-check {
        line-height: 28px;
        }

        .editable-cell:hover .editable-cell-icon {
        display: inline-block;
        }

        .editable-cell-icon:hover,
        .editable-cell-icon-check:hover {
        color: #108ee9;
        }

        .editable-add-btn {
        margin-left: 18px;
        margin-bottom: 30px;
        margin-right: 700px;
        }
    }
</style>